import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { NavBar, Menu, TabBar } from 'antd-mobile';
import addDepartment from '../assets/add_department_patient@1x.png';
import addDepartment2 from '../assets/1.png';
import styles from './SelectDeptListPage.css';

function SelectDeptListPage({ deptList, dispatch }) {
  const { department } = deptList;
  function onChange(value) {
    let label = '';
    let label1 = '';
    department.forEach((dataItem) => {
      if (dataItem.value === value[0]) {
        label = dataItem.label;
        if (dataItem.children && value[1]) {
          dataItem.children.forEach((cItem) => {
            if (cItem.value === value[1]) {
              label += ` ${cItem.label}`;
              label1 = `${cItem.label}`;
            }
          });
        }
      }
    });
    console.log(`${label1}`);
    console.log(`${label}`);
    dispatch({
      type: 'physicianAuth/selectDeptSuccess',
      payload: {
        name: label1,
        code: value[1],
      },
    });
    dispatch(routerRedux.push('/physicianAuth'));
  }
  return (
    <div>
      <NavBar mode="light" iconName="false">选择科室</NavBar>
      <Menu
        data={department}
        value={['229']}
        onChange={onChange}
        height={document.documentElement.clientHeight * 1}
      />
      <TabBar
        barTintColor="white"
      >
        <TabBar.Item
          key="Life"
          icon={<div className={styles.title}>
            <img src={addDepartment} className={styles.leftIcon} role="presentation" />
            没有您的科室？点击添加
            <img src={addDepartment2} className={styles.rightIcon} role="presentation" />
          </div>
          }
          onPress={() => {
            dispatch(routerRedux.push('/addNewDept'));
          }}
        />
      </TabBar>
      {/* <List>
        {
          depts.map((item) => {
            return (
              <RadioItem
                key={item.code} checked={deptCode === item.code}
                onChange={() => onSelectDeptSuccess(item)}
              >
                {item.name}
              </RadioItem>
            );
          })
        }
      </List> */}
    </div>
  );
}

function mapStateToProps({ deptList, physicianAuth }) {
  return { deptList, physicianAuth };
}

export default connect(mapStateToProps)(SelectDeptListPage);
